<template>
  <el-card shadow="never">
    <!-- 头部 -->
    <div slot="header">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }"> <i class="el-icon-house"></i> 首页</el-breadcrumb-item>
        <el-breadcrumb-item>分类管理</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <!-- 主体内容 -->
    <div class="filter-form">
      <div class="ipt"></div>
      <el-button type="primary"
                 size="small"
                 icon="el-icon-plus"
                 @click='isAddShow=true'>增加</el-button>
    </div>
    <!-- 表格 -->
    <!-- data表示表格的数据 -->
    <!-- columns 属性表示 表格的列信息 -->
    <zk-table :data="list"
              :expand-type="false"
              :selection-type="false"
              :show-index="true"
              :columns="columns">
      <!-- 有效列 -->
      <template slot="deleted"
                slot-scope="scope">
        <i v-if="scope.row.cat_deleted"
           class="el-icon-error"></i>
        <i v-else
           class="el-icon-success"></i>
      </template>
      <!-- 层级列 -->
      <template slot="level"
                slot-scope="scope">
        <el-tag v-if="scope.row.cat_level==0"
                type="success">一级</el-tag>
        <el-tag v-if="scope.row.cat_level==1"
                type="primary">二级</el-tag>
        <el-tag v-if="scope.row.cat_level==2"
                type="danger">三级</el-tag>
      </template>
      <!-- 操作列 -->
      <template slot="action">
        <el-button type="success"
                   size="small"
                   circle
                   icon="el-icon-edit"></el-button>
        <el-button type="danger"
                   size="small"
                   circle
                   icon="el-icon-delete"></el-button>
      </template>
    </zk-table>

    <!-- 分页器 -->
    <!-- page-size属性表示 每页个数 -->
    <!-- total 属性表示 总条数 -->
    <!-- current-page 属性表示 当前页码数 -->
    <el-pagination background
                   @size-change="sizeChange"
                   @current-change="currentChange"
                   :page-size="params.pagesize"
                   :current-page="params.pagenum"
                   layout=' sizes,prev, pager, next,->, total'
                   :page-sizes="[10,20,30,40,50]"
                   :total="total">
    </el-pagination>

    <el-dialog title="修改用户"
               :visible.sync="isAddShow"
               width="50%">
      <el-form :model="addFormInfo"
               ref="addFormInfo"
               :rules="addFormRules"
               label-width="80px"
               :inline="false"
               size="normal">
        <el-form-item label="分类名"
                      prop='cat_name'>
          <el-input v-model="addFormInfo.cat_name"></el-input>
        </el-form-item>
        <el-form-item label='上级分类'
                      prop='checkList'>
          <!-- 级联控件 -->
          <el-cascader v-model='addFormInfo.checkList'
                       clearable
                       :props="{label:'cat_name',value:'cat_id',children:'children',checkStrictly:true}"
                       :options='allCateList'></el-cascader>
        </el-form-item>
      </el-form>
      <span slot="footer">
        <el-button @click='isAddShow=flase'>Candel</el-button>
        <el-button type='primary'
                   @click='addSubmit'>OK</el-button>
      </span>
    </el-dialog>

  </el-card>
</template>

<script>
import ZkTable from 'vue-table-with-tree-grid'
export default {
  components: {
    ZkTable
  },
  name: 'Cate',
  data() {
    return {
      list: [],
      params: {
        pagenum: 1,
        pagesize: 10
      },
      total: 0,
      columns: [
        // 表格的列信息
        { label: '分类名', prop: 'cat_name' },
        { label: '是否有效', type: 'template', template: 'deleted' },
        { label: '层级', type: 'template', template: 'level' },
        // type 为template 表示该列是自定义模板
        // template 属性表示列模板插槽的名称
        { label: '操作', type: 'template', template: 'action' }
      ],
      isAddShow: true,
      addFormInfo: {
        cat_name: '',
        checkList: []
      },
      addFormRules: {
        cat_name: [{ required: true, message: '请输入分类名', trigger: 'blur' }]
      },
      allCateList: [] //所有分类
    }
  },
  created() {
    this.getCateList()
    this.getAllCateList()
  },
  computed: {
    cat_pid() {
      if (this.addFormInfo.checkList.length) {
        return this.addFormInfo.checkList[this.addFormInfo.checkList.length - 1]
      } else {
        return 0
      }
    },
    cat_level() {
      return this.addFormInfo.checkList.length
    }
  },
  methods: {
    // 获取列表数据
    async getCateList() {
      const { data: res } = await this.$axios.get('/categories', {
        params: this.params
      })
      if (res.meta.status !== 200) return this.$message.error(res.meta.msg)
      this.list = res.data.result
      this.total = res.data.total
    },
    // 页码变化
    currentChange(val) {
      // val是最新页码
      this.params.pagenum = val
      this.getCateList()
    },
    // 每页数量变化
    sizeChange(val) {
      // val是最新的每页数量
      this.params.pagesize = val
      this.getCateList()
    },
    async getAllCateList() {
      const { data: res } = await this.$axios.get('/categories')
      if (res.meta.status !== 200) return this.$message.error(res.meta.msg)
      this.allCateList = res.data
    },
    addSubmit() {
      this.$refs.addFormInfo.validate(async valid => {
        if (!valid) return false
        const { data: res } = await this.$axios.post('/categories', {
          cat_pid: this.cat_pid,
          cat_name: this.addFormInfo.cat_name,
          cat_level: this.cat_level
        })
        if (res.meta.status !== 201) return this.$message.error(res.meta.msg)
        this.$message.success(res.meta.msg)
        this.$refs.addFormInfo.resetFields()
        this.isAddShow = false
        this.getCateList()
        this.getAllCateList()
      })
    }
  }
}
</script>

<style>
</style>
